<template>
  <view class="search-container">
    <go-back></go-back>

    <!-- 搜索框 -->
    <view class="search-header">
      <view class="search-box">
        <text class="search-icon">🔍</text>
        <input
          type="text"
          class="search-input"
          v-model="searchKeyword"
          placeholder="搜索"
          @confirm="goSearch"
          focus
        />
      </view>
      <text class="cancel-btn" @click="goSearch">搜索</text>
    </view>

    <!-- 搜索历史 -->
    <view class="search-history" v-if="searchHistory.length > 0">
      <view class="section-header">
        <text class="title">搜索历史</text>
      </view>
      <view class="history-list">
        <view
          class="history-item"
          v-for="(item, index) in searchHistory"
          :key="index"
          @click="useHistoryKeyword(item)"
        >
          <text class="history-text">{{ item }}</text>
          <text class="delete-btn" @click.stop="deleteHistoryItem(index)"
            >×</text
          >
        </view>
        <view class="clear-history" @click="clearHistory">
          <text class="clear-btn">清除全部</text>
        </view>
      </view>
    </view>

    <!-- 热门搜索 -->
    <view class="hot-search">
      <view class="section-header">
        <text class="title">热门搜索</text>
      </view>
      <view class="hot-list">
        <view
          class="hot-item"
          v-for="(item, index) in hotSearchList"
          :key="index"
          @click="useHistoryKeyword(item)"
        >
          <text class="hot-rank" :class="{ 'top-rank': index < 3 }">{{
            index + 1
          }}</text>
          <text class="hot-text">{{ item }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref } from "vue";
  // 搜索关键词
  const searchKeyword = ref("");

  // 搜索历史
  const searchHistory = ref(
    uni.getStorageSync("searchHistory") || [
      "校园风光",
      "图书馆",
      "食堂美食",
      "宿舍生活",
    ]
  );

  // 热门搜索
  const hotSearchList = ref([
    "校园生活",
    "美食推荐",
    "学习攻略",
    "宿舍装饰",
    "校园风景",
    "社团活动",
    "运动健身",
    "考试复习",
  ]);

  // 处理搜索
  const goSearch = async () => {
    if (searchKeyword.value.trim()) {
      // 将搜索词添加到历史记录
      if (!searchHistory.value.includes(searchKeyword.value)) {
        searchHistory.value.unshift(searchKeyword.value);
        // 限制历史记录最多保存8条
        if (searchHistory.value.length > 8) {
          searchHistory.value.pop();
        }
        uni.setStorageSync("searchHistory", searchHistory.value);
      }
      const keyword = searchKeyword.value;
      uni.navigateTo({
        url: "/pages/search/result?keyword=" + keyword,
      });
      searchKeyword.value = "";
      console.log("搜索:", keyword);
    }
  };

  // 使用历史搜索词
  const useHistoryKeyword = (keyword) => {
    searchKeyword.value = keyword;
    goSearch();
  };

  // 删除单个历史记录
  const deleteHistoryItem = (index) => {
    searchHistory.value.splice(index, 1);
    uni.setStorageSync("searchHistory", searchHistory.value);
  };

  // 清除所有历史记录
  const clearHistory = () => {
    searchHistory.value = [];
    uni.setStorageSync("searchHistory", []);
  };
</script>

<style lang="scss">
  .search-container {
    height: calc(100vh - 40rpx);
    background-color: #f8f8f8;
    padding: 20rpx;
    position: relative;
    // .back-button {
    //       width: 60rpx;
    //       height: 60rpx;
    //       display: flex;
    //       align-items: center;
    //       justify-content: center;
    //     }

    .search-header {
      display: flex;
      align-items: center;
      margin-top: 600rpx;
      padding: 20rpx 0;
      .search-box {
        flex: 1;
        height: 80rpx;
        background-color: #fff;
        border-radius: 35rpx;
        display: flex;
        align-items: center;
        padding: 0 30rpx;
        box-shadow: 0 5rpx 10rpx rgba(0, 0, 0.3);

        .search-icon {
          font-size: 32rpx;
          color: #999;
          margin-right: 10rpx;
        }

        .search-input {
          flex: 1;
          height: 100%;
          font-size: 28rpx;
          color: #333;
        }
      }

      .cancel-btn {
        padding: 0 20rpx;
        font-size: 28rpx;
        color: #666;
      }
    }

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx 0 20rpx;

      .title {
        font-size: 30rpx;
        font-weight: 600;
        color: #333;
        text-align: center;
        flex: 1;
      }

      .clear-btn {
        font-size: 26rpx;
        color: #999;
      }
    }

    .search-history {
      margin-top: 30rpx;
      .history-list {
        display: flex;
        flex-wrap: wrap;
        gap: 20rpx;

        .history-item {
          background-color: #fff;
          padding: 10rpx 30rpx;
          border-radius: 30rpx;
          display: flex;
          align-items: center;

          .history-text {
            font-size: 26rpx;
            color: #666;
          }

          .delete-btn {
            margin-left: 10rpx;
            font-size: 28rpx;
            color: #999;
            padding: 0 10rpx;
          }
        }

        .clear-history {
          width: 100%;
          text-align: center;
          margin-top: 20rpx;

          .clear-btn {
            font-size: 26rpx;
            color: #999;
            padding: 20rpx;
          }
        }
      }
    }

    .hot-search {
      margin-top: 40rpx;
      position: absolute;
      top: 200rpx;
      .hot-list {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;

        .hot-item {
          width: 200rpx;
          align-items: center;
          padding: 20rpx 0;
          background: #eee;
          margin: 7rpx;
          text-align: center;
          border-radius: 38rpx;
          border-bottom: 1rpx solid #f0f0f0;

          .hot-rank {
            width: 40rpx;
            font-size: 28rpx;
            color: #999;
            text-align: center;

            &.top-rank {
              color: #ff5a5f;
              font-weight: 600;
            }
          }

          .hot-text {
            margin-left: 20rpx;
            font-size: 28rpx;
            color: #333;
          }
        }
      }
    }
  }
</style>
